<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> New Document </title>

  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- Required Javascript -->
  <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
  <script src="./js/bootstrap-treeview.js"></script>

 </head>
 <body>
  <h2>基本样式</h2> 
  <div id="tree_basic"></div>
  <h2>多级展开加背景颜色</h2> 
  <div id="tree_level"></div>
  
  <script type="text/javascript">
    function getTree() {
    // Some logic to retrieve, or generate tree structure
    var data = [
      {
        text: "Parent 1",
        nodes: [
          {
            text: "Child 1",
            nodes: [
              {
                text: "Grandchild 1"
              },
              {
                text: "Grandchild 2"
              }
            ]
          },
          {
            text: "Child 2"
          }
        ]
      },
      {
        text: "Parent 2"
      },
      {
        text: "Parent 3"
      },
      {
        text: "Parent 4"
      },
      {
        text: "Parent 5"
      }
    ];
    return data;
    }
    //基本的2级展现
    $('#tree_basic').treeview({
      data: getTree()
    });
     
    //自定义属性  
    $('#tree_level').treeview({
      data: getTree(),
      levels: 5,
      backColor: 'green'
    });
    
  </script>
 </body>
</html>